<template>
  <div>
    房间名称:<input type="text" v-model="rname" />
    <input type="button" value="查询" @click="search" />
  </div>
  <table class="table-bordered" border="1">
    <thead>
      <tr>
        <td>
          <input type="checkbox" v-model="Rallcheck" @change="GetAllcheck" />
        </td>
        <td>房型编号</td>
        <td>房型名称</td>
        <td>房型价格</td>
        <td>押金</td>
        <td>面积</td>
        <td>可住人数</td>
        <td>可否加床</td>
        <td>房型图片</td>
        <td>房型描述</td>
        <td>房型投放</td>
        <td>删除标志位</td>
        <td>删除时间</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in roomtype">
        <td>
          <input
            type="checkbox"
            @change="GetRevercheck"
            :checked="Ischeck"
            :value="item.rType_id"
            v-model="Rarrcheck"
          />
        </td>
        <td>{{ item.rType_id }}</td>
        <td>{{ item.rType_Name }}</td>
        <td>{{ item.rType_Price }}</td>
        <td>{{ item.rType_Deposil }}</td>
        <td>{{ item.rType_Size }}</td>
        <td>{{ item.rType_Num }}</td>
        <td>{{ item.rType_AddBed ? "加床" : "不加床" }}</td>
        <td><img :src="item.rType_Img" width="50px" height="50px" /></td>
        <td>{{ item.rType_Info }}</td>
        <td>{{ item.rType_State }}</td>
        <td>{{ item.rType_InfoState ? "已删" : "未删" }}</td>
        <td>{{ item.rType_DeleteTime }}</td>
        <td>
          <a href="#" @click="upRoomType(item.rType_id)">修改</a>
          <a href="#" @click="DeleteRoomType(item.rType_id)">逻辑删除</a>
        </td>
      </tr>
    </tbody>
  </table>

  <span>
    共{{ page.totalCount }}条数据，每页显示{{ page.pageSize }}条数据,当前为第{{
      page.pageIndex
    }}/{{ page.pageCount }}页
    <a href="#" @click="Getpage('首页')">首页</a>
    <a href="#" @click="Getpage('上一页')">上一页</a>
    <a href="#" @click="Getpage('下一页')">下一页</a>
    <a href="#" @click="Getpage('尾页')">尾页</a>

    <select v-model="getcheng" @change="Getcheng">
      <option :value="0">--请选择--</option>
      <option :value="1">每页1行</option>
      <option :value="2">每页2行</option>
      <option :value="3">每页3行</option>
    </select>

    <input type="text" style="width: 30px; height: 30px" v-model="getinfo" />
    <input type="button" value="跳转" @click="GetInfo" />

    <input type="button" value="导出" @click="GetExcl" />
  </span>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();

// 全选
const Rallcheck = ref(false);

// 选中状态
const Ischeck = ref(false);

// 存放所有编号
const Rarrcheck = ref([]);

// 实现全选
const GetAllcheck = () => {
  if (Rallcheck.value) {
    Ischeck.value = true;
    Rarrcheck.value = roomtype.value.map((item: any) => {
      return item.rType_id;
    });
  } else {
    Ischeck.value = false;
  }
};

// 实现反选
const GetRevercheck = () => {
  if (Rarrcheck.value.length == roomtype.value.length) {
    Rallcheck.value = true;
  } else {
    Rallcheck.value = false;
  }
};
//房型数据
const roomtype: any = ref([
  {
    rType_id: 0,
    rType_Name: "",
    rType_Price: 0,
    rType_Deposil: 0,
    rType_Size: 0,
    rType_Num: 0,
    rType_AddBed: true,
    rType_Img: "",
    rType_Info: "",
    rType_State: true,
    rType_InfoState: true,
    rType_DeleteTime: "2024-10-30T07:07:06.727Z",
  },
]);

//分页数据
const page = ref({
  pageIndex: 1,
  pageSize: 2,
  totalCount: 0,
  pageCount: 0,
});

const rname = ref("");
onMounted(() => {
  ShowRoomType();
});

//显示
const ShowRoomType = () => {
  axios
    .get("https://localhost:7071/api/RoomType/ShowRoomType", {
      params: {
        roomtype: rname.value,
        pageIndex: page.value.pageIndex,
        pageSize: page.value.pageSize,
      },
    })
    .then((res) => {
      console.log(res.data);
      roomtype.value = res.data.pageDate;
      page.value.totalCount = res.data.totalCount;
      page.value.pageCount = res.data.pagelCount;
    })
    .catch((err) => {
      console.log(err);
    });
};

const upRoomType = (Rid: number) => {
  router.push({
    name: "UpRoomTypeView",
    params: {
      id: Rid,
    },
  });
};

//查询
const search = () => {
  axios
    .get("https://localhost:7071/api/RoomType/ShowRoomType", {
      params: {
        roomtype: rname.value,
        pageIndex: page.value.pageIndex,
        pageSize: page.value.pageSize,
      },
    })
    .then((res) => {
      // console.log(res.data)
      roomtype.value = res.data.pageDate;
      page.value.totalCount = res.data.totalCount;
      page.value.pageCount = res.data.pageCount;
    })
    .catch((err) => {
      console.log(err);
    });
};

//分页

const Getpage = (ch: string) => {
  switch (ch) {
    case "首页":
      page.value.pageIndex = 1;
      break;
    case "上一页":
      if (page.value.pageIndex > 1) {
        page.value.pageIndex--;
      } else {
        alert("已经是首页");
      }
      break;
    case "下一页":
      if (page.value.pageIndex < page.value.pageCount) {
        page.value.pageIndex++;
      } else {
        alert("已经是尾页");
      }
      break;
    case "尾页":
      page.value.pageIndex = page.value.pageCount;
      break;
  }
  ShowRoomType();
};

//翻页
const getcheng = ref(0);
const Getcheng = () => {
  page.value.pageSize = getcheng.value;
  ShowRoomType();
};

//跳转
const getinfo = ref("");
const GetInfo = () => {
  const info = getinfo.value;
  page.value.pageIndex = Number(info);
  ShowRoomType();
};

// 逻辑删除
const DeleteRoomType = (rid: number) => {
  axios
    .delete("https://localhost:7071/api/RoomType/DelRoomType", {
      params: {
        Rid: rid,
      },
    })
    .then((res) => {
      if (res.data > 0) {
        alert("逻辑删除成功");
        ShowRoomType();
      } else {
        alert("逻辑删除失败");
      }
    });
  ShowRoomType();
};

// 导出
const GetExcl = () => {
  axios.get("https://localhost:7071/api/RoomType/ExportRoomType", {
      params: {
        PathName: "D:\\专高二\\Ex.xlsx",
      },
    })
      .then((res) => {
        console.log(res.data)
      if (res.data ==1) {
        alert("文件导入成功");
      }
    });
};
</script>

<style scoped>
</style>